<template>
	<view class="e-p-20" :style="[AppSkinVar]">
		<view class="e-p-l-20 e-p-r-20 e-p-t-32 e-p-b-30 e-flex e-m-b-20 coupon-item-bg" v-for="item in list"
			:key="item.id" :style="{backgroundImage: `url(${$staticPath('coupon-item-bg.png')})` }">
			<view class="e-flex-1 e-p-10">
				<view v-if="item.type === 1" class="e-flex fw-600 e-m-b-4 e-flex-xy-center"
					:style="{color: AppSkin.primary}" style="align-items: flex-end;">
					<text class="e-font-26">{{$unitEn}}</text>
					<text class="e-font-34">{{item.amount}}</text>
				</view>
				<view v-else-if="item.type === 2" class="e-flex fw-600 e-m-b-4 e-flex-xy-center"
					:style="{color: AppSkin.primary}" style="align-items: flex-end;">
					<text class="e-font-34">{{item.discountScale}}</text>
					<text class="e-font-26">{{$t('public.折')}}</text>
				</view>
				<view v-else class="e-flex fw-600 e-m-b-4 e-flex-xy-center" :style="{color: AppSkin.primary}"
					style="align-items: flex-end;">
					<text class="e-font-34">{{item.discountScale}}</text>
					<text class="e-font-26">%</text>
				</view>
				<view class="e-font-20 text-center" :style="{color: AppSkin.primary}">
					<text v-if="item.minPoint">
						{{$t('public.满')}} {{item.minPoint}} {{$t('nearby.可用')}}
					</text>
					<text v-else>
						{{$t('public.无门槛')}}
					</text>
				</view>
			</view>
			<view class="flex-2 e-p-10">
				<view class="c-333 fw-600 e-font-30 e-m-b-10">
					{{item.name}}
				</view>
				<view class="e-m-b-12 e-font-24 e-font-16 e-p-t-6 e-p-r-8 e-p-b-4 e-p-l-8 use-box"
					:style="{color: AppSkin.primary,border: `1rpx solid ${AppSkin.primary}`}">
					<text v-if="item.useType">{{$t('classify.部分商品可用')}}</text>
					<text v-else>{{$t('classify.全部商品可用')}}</text>
				</view>
				<view class="e-font-22 e-m-b-10" v-if="item.couponType === 2 && item.discountMoney">
					{{$t('public.最高优惠')}}：{{$unitEn}}{{item.discountMoney}}
				</view>
				<view class="c-98 e-font-20">
					<view v-if="item.useTimeType === 1">
						{{timeSplit(item.useStartTime)}}-{{timeSplit(item.useEndTime)}}
					</view>
					<view v-if="item.useTimeType === 2">
						{{$t('public.立即生效')}} {{$t('public.有效期')}} {{item.enableDays}} {{$t('public.day')}}
					</view>
				</view>
			</view>
			<view class="e-flex-1">
				<view class="use-btn c-white e-font-24	e-flex e-flex-xy-center" @tap="handleSelect(item)"
					v-if="!item.useStatus" :style="{background: AppSkin.gradientPrimary}">
					{{$t('advanceShare.选择')}}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import {
		getCouponShareCouponList,
		postGenerateCode,
		getInviteData
	} from '@/common/request/api'
	import {  useCurrentInstance } from '@/common/hooks';
	import type {
		ShareCouponItem
	} from '@/common/request/api'
	import { useInit } from '@/common/stores'
	import { storeToRefs } from 'pinia'

	const props = defineProps({
		type: {
			type: String,
			required: true
		},
		proId: String
	})
	
	const ctx = useCurrentInstance()
	
	const { AppSkin } = storeToRefs(useInit())
	
	const list = ref<ShareCouponItem[]>([])

	const getData = () => {
		getCouponShareCouponList({
			type: props.type,
			proId: props.proId
		}).then(res => {
			list.value = res.data
		})
	}

	const timeSplit = (val : string) => val.split(' ')[0]



	const handleSelect = (item : ShareCouponItem) => {
		let params = {
			name: item.name,
			shareUrl: "",
			couponShareCode: "",
			type: props.type,
			couponId: "",
			proId: props.proId || ''
		}
		if (!item.list || !item.list.length) {
			uni.showLoading({
				title: 'loading...',
				mask: true
			})
			// 1-邀请注册使用劵码 2-全场通用劵码 3-分类劵码 4-分区劵码 5-商品劵码
			let url = ''
			let pcUrl  = item.categoryIds ? `/classify/${item.categoryIds}` :item.subareaIds ? `/classify/subarea/${item.subareaIds}` :"/classify/search"
			
			if (props.type === '2') {
				url = '/pages/tabbar/index'
			} else if (props.type === '5') {
				url = '/pages/classify/goods/info/index'
				 pcUrl = `/classify/goods/${ props.proId}`
			} else {
				url = '/pages/classify/searchResult'
				
			}
			if (props.type == '1') {
				// #ifdef HTML5 || PREVIEW
				url = '/pages/public/account/register'
				// #endif
				// #ifdef APP-PLUS
				url = '/pages/invite/register'
				// #endif
				pcUrl = "/public/register"
			}
			const eventChannel = ctx.getOpenerEventChannel();

			getInviteData({
				url,
				formType: getApp().globalData?.payFromType
			}).then(async res => {
				// 应后端靓仔要求，生成券码链接要pc和h5的地址都必传
				const _res = await getInviteData({
					url:pcUrl,
					formType: 'pc'
				})
				const _shareUrl = res.shareUrl + '&couponShareCode=,' + '&categoryId=' + item.categoryIds + '&subareaId=' + item.subareaIds + '&id=' + props.proId
				const pcShareUrl = _res.shareUrl + '&couponShareCode=,'
				const _params = {
					shareUrl: _shareUrl,
					pcShareUrl,
					couponId: item.id
				}
				postGenerateCode(_params).then(res => {
					// 判断list是否多个 多个则shareUrl为空

					if (res.data.length > 1) {
						params.couponId = res.data[0].couponId
					} else {
						params.shareUrl = res.data[0].shareUrl + '&couponShareCode=' + res.data[0].couponShareCode + '&categoryId=' + item.categoryIds + '&subareaId=' + item.subareaIds
						params.couponShareCode = res.data[0].couponShareCode
					}
					

					eventChannel.emit('selectCoupon', params)
					ctx.$back();

				}).finally(() => {
					uni.hideLoading()
				})

			}).catch(() => {
				uni.hideLoading()
			})

		} else {
			// 判断list是否多个 多个则shareUrl为空
			if (item.list.length > 1) {
				params.couponId = item.list[0].couponId
			} else {
				params.shareUrl = item.list[0].shareUrl + '&couponShareCode=' + item.list[0].couponShareCode + '&categoryId=' + item.categoryIds + '&subareaId=' + item.subareaIds
				params.couponShareCode = item.list[0].couponShareCode
			}
			eventChannel.emit('selectCoupon', params)
			ctx.$back();
		}

	}


	getData()
</script>

<style>
	page {
		background-color: #F7F7F7;
	}
</style>
<style lang="scss" scoped>
	.coupon-item-bg {
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.use-btn {
		bottom: 22rpx;
		right: 40rpx;
		border-radius: 25rpx;
		width: 144rpx;
		height: 50rpx;
		background: linear-gradient(180deg, #F5DEBA 0%, #FDEAC1 100%);
	}

	.coupon-platform {
		padding: 2rpx;
		border-radius: 50%;
	}

	.use-box {
		border-radius: 4rpx;
		display: inline-block;
	}

	.c-98 {
		color: #989898;
	}
</style>